<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>黑马旅游-搜索</title>
    <link rel="stylesheet" type="text/css" href="css/common.css">
    <link rel="stylesheet" href="css/search.css">
    <script type="text/javascript" src="js/jquery-1.11.0.min.js"></script>
    <!--导入根据参数名字获取参数值js文件-->
    <script type="text/javascript" src="js/getParameter.js"></script>

</head>
<body>
    <div id="app">

        <!--引入头部-->
        <div id="header">
        </div>
        <div class="page_one">
            <div class="contant">
                <div class="crumbs">
                    <img src="images/search.png" alt="">
                    <p>黑马旅行><span>搜索结果</span></p>
                </div>
                <div class="xinxi clearfix">
                    <div class="left">
                        <div class="header">
                            <span>商品信息</span>
                            <span class="jg">价格</span>
                        </div>
                        <ul>
                            <li v-for="route in pageInfo.list">
                                <div class="img"><img :src="route.rimage" alt=""></div>
                                <div class="text1">
                                    <p>{{route.rname}}</p>
                                    <br/>
                                    <p>{{route.routeIntroduce}}</p>
                                </div>
                                <div class="price">
                                    <p class="price_num">
                                        <span>&yen;</span>
                                        <span>{{route.price}}</span>
                                        <span>起</span>
                                    </p>
                                    <p><a href="route_detail.html">查看详情</a></p>
                                </div>
                            </li>
                        </ul>
                        <div class="page_num_inf">
                            <i></i> 共
                            <span>{{pageInfo.pages}}</span>页<span>{{pageInfo.total}}</span>条
                        </div>
                        <div class="pageNum">
                            <ul>
                                <li><a href="javascript:void(0)" @click="pageNumber=1" >首页</a></li>
                                <li class="threeword"><a href="javascript:void(0)" @click="pageNumber=pageInfo.prePage" >上一页</a></li>

                                <li v-for="page in pageInfo.navigatepageNums" :class="pageNumber==page?'curPage':''">
                                    <a href="javascript:void(0)"  @click="pageNumber=page" >{{page}}</a>
                                </li>

                                <li class="threeword"><a href="javascript:void(0)" @click="pageNumber=pageInfo.nextPage" >下一页</a></li>
                                <li class="threeword"><a href="javascript:void(0)" @click="pageNumber=pageInfo.Pages">末页</a></li>
                            </ul>
                        </div>
                    </div>
                    <div class="right">
                        <div class="top">
                            <div class="hot">HOT</div>
                            <span>热门推荐</span>
                        </div>
                        <ul>
                            <li>
                                <div class="left"><img src="images/04-search_09.jpg" alt=""></div>
                                <div class="right">
                                    <p>清远新银盏温泉度假村酒店/自由行套...</p>
                                    <p>网付价<span>&yen;<span>899</span>起</span>
                                    </p>
                                </div>
                            </li>
                            <li>
                                <div class="left"><img src="images/04-search_09.jpg" alt=""></div>
                                <div class="right">
                                    <p>清远新银盏温泉度假村酒店/自由行套...</p>
                                    <p>网付价<span>&yen;<span>899</span>起</span>
                                    </p>
                                </div>
                            </li>
                            <li>
                                <div class="left"><img src="images/04-search_09.jpg" alt=""></div>
                                <div class="right">
                                    <p>清远新银盏温泉度假村酒店/自由行套...</p>
                                    <p>网付价<span>&yen;<span>899</span>起</span>
                                    </p>
                                </div>
                            </li>
                            <li>
                                <div class="left"><img src="images/04-search_09.jpg" alt=""></div>
                                <div class="right">
                                    <p>清远新银盏温泉度假村酒店/自由行套...</p>
                                    <p>网付价<span>&yen;<span>899</span>起</span>
                                    </p>
                                </div>
                            </li>
                            <li>
                                <div class="left"><img src="images/04-search_09.jpg" alt=""></div>
                                <div class="right">
                                    <p>清远新银盏温泉度假村酒店/自由行套...</p>
                                    <p>网付价<span>&yen;<span>899</span>起</span>
                                    </p>
                                </div>
                            </li>
                        </ul>
                    </div>
                </div>
            </div>
        </div>

        <!--导入底部-->
        <div id="footer">
        </div>
    </div>
</body>
<script src="js/jquery-1.11.0.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<!--导入布局js，共享header和footer-->
<script type="text/javascript" src="js/include.js"></script>
<script src="js/vue.js"></script>
<script src="js/axios-0.18.0.js"></script>
<script>
    new Vue({
        el:"#app",
        data:{
            pageNumber:1,
            pageInfo:{}
        },
        methods:{
            findByPage(){
                console.log(location);
                let cid=location.search.split("=")[1];
                axios.get("/route?action=findByPage",{
                    params:{
                        pageNumber:this.pageNumber,
                        cid:cid
                    }
                }).then(
                    resp=>{
                        this.pageInfo=resp.data
                    }
                )
            }
        },
        watch:{
            pageNumber(newValue,oldVlalue){
                this.findByPage();
            }
        },

        created(){
            this.findByPage();
        }
    })
</script>
</html>